<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="jd_layout">
        <!-- 搜索块 -->
        <div class="jd_search">
            <a href="javascript:;" class="jd_logo"></a>
            <form action="" class="searchBox">
                <input type="text" placeholder="请输入商品名称">
            </form>
            <a href="javascript:;" class="jd_login">登录</a>
        </div>
        <!-- 轮播图 -->
        <div class="jd_banner">
            <ul class="jd_bannerImg">
                <!-- <li>
                    <a href="javascript:;">
                        <img src="./uploads/l8.jpg" alt="">
                    </a>
                </li> -->
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l8.jpg" alt="">
                    </a>
                </li>
                <!-- <li>
                    <a href="javascript:;">
                        <img src="./uploads/l1.jpg" alt="">
                    </a>
                </li> -->
            </ul>
            <ul class="jd_bannerIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 导航块 -->
        <div class="jd_nav">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_1.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_2.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_3.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_4.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_5.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_6.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_7.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/nav_8.png" alt="">
                        <p>商品分类</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 产品块 -->
        <div class="jd_product">
            <div class="jd_productBox clearfix jd_sk">
                <div class="jd_pTip">
                    <div class="jd_left f_left">
                        <span class="jd_sk_icon f_left m_left10"></span>
                        <span class="jd_sk_text f_left m_left10">掌上秒杀</span>
                        <div class="jd_sk_time f_left m_left10">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="jd_right f_right m_right10">更多秒杀...</div>
                </div>
                <div class="jd_pContent clearfix">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src="./uploads/detail01.jpg" alt="">
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./uploads/detail01.jpg" alt="">
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./uploads/detail01.jpg" alt="">
                            </a>
                            <p>&yen;10.00</p>
                            <p>&yen;20.00</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="jd_productBox">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent clearfix">
                    <a href="javascript:;" class="a_50 f_left b_bottom">
                        <img src="./uploads/cp1.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_right a_50 b_left b_bottom">
                        <img src="./uploads/cp2.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_right a_50 b_bottom b_left">
                        <img src="./uploads/cp3.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="jd_productBox">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent clearfix">
                    <a href="javascript:;" class="a_50 f_right">
                        <img src="./uploads/cp4.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_left a_50 b_left b_bottom">
                        <img src="./uploads/cp5.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_left a_50 b_bottom b_left">
                        <img src="./uploads/cp6.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="jd_productBox">
                <div class="jd_pTip">
                    <h3>京东超市</h3>
                </div>
                <div class="jd_pContent clearfix">
                    <a href="javascript:;" class="a_50 f_left">
                        <img src="./uploads/cp1.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_right a_50 b_left b_bottom">
                        <img src="./uploads/cp2.jpg" alt="">
                    </a>
                    <a href="javascript:;" class="f_right a_50 b_bottom b_left">
                        <img src="./uploads/cp3.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var banner = document.querySelector(".jd_banner");
    var bannerhight = banner.offsetHeight;
    //获取搜索块
    var search = document.querySelector(".jd_search");
    //滚动事件
    window.onscroll = function() {
        var offsettop = document.body.scrollTop || document.documentElement.scrollTop;
        var touming = 0;
        if (offsettop < bannerhight) {
            touming = offsettop / bannerhight;
            // console.log(touming);
            search.style.backgroundColor = "rgba(235, 46, 46," + touming + ")";
        }
    };

    var lunbo = function() {
        //轮播图
        //获取轮播图结构
        var banner = document.querySelector('.jd_banner');
        //获取图片容器
        var imgbox = banner.querySelector('ul:first-of-type');
        //获取原始的第一张图片
        var first = imgbox.querySelector('li:first-of-type');
        //获取原始的最后一张图片
        var last = imgbox.querySelector("li:last-of-type");
        //在首位插入两张图片  cloneNode:复制一个dom元素
        imgbox.appendChild(first.cloneNode(true));
        /*insertBefore(需要插入的dom元素，位置)*/
        imgbox.insertBefore(last.cloneNode(true), imgbox.firstChild);

        // 设置样式
        // 获取所有的li
        var lis = imgbox.querySelectorAll("li");
        var count = lis.length;
        //获取banner宽度
        var bannerwidth = banner.offsetWidth;
        // imgbox.style.width = "count + '00%'";
        // console.log(bannerwidth, 444);
        imgbox.style.width = count * bannerwidth + "px";
        //设置每个li的宽度
        for (var i = 0; i < lis.length; i++) {
            // lis[i].style.width = 100 / count + "00%";
            lis[i].style.width = bannerwidth + "px";
        }
        //定义图片索引
        var index = 1;
        //设置默认偏移量
        imgbox.style.left = -index * bannerwidth + "px";
        //当屏幕变化的时候，重新计算宽度
        window.onresize = function() {
            /*4.1.获取banner的宽度,覆盖全局的宽度值*/
            bannerwidth = banner.offsetWidth;
            /*4.2 设置图片盒子的宽度*/
            imgbox.style.width = count * bannerwidth + "px";
            /*4.3设置每一个li(图片)元素的宽度*/
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.width = bannerwidth + "px";
            }
            /*4.4重新设置定位值*/
            imgbox.style.left = -index * bannerwidth + "px";
        };

        //实现点标记
        var setdian = function(index) {
            var dian = banner.querySelector("ul:last-of-type").querySelectorAll("li");
            //先清除其他li元素的active样式
            for (var i = 0; i < dian.length; i++) {
                dian[i].classList.remove("active");
            };
            //为当前li元素添加active样式
            dian[index - 1].classList.add("active");
        };
        //自动轮播
        var timerId;
        var startTime = function() {
            timerId = setInterval(function() {
                index++;
                //添加过渡效果
                imgbox.style.transition = "left 0.5s ease-in-out";
                //设置偏移量
                imgbox.style.left = (-index * bannerwidth) + "px";
                //判断是否最后一张
                setTimeout(function() {
                    if (index == count - 1) {
                        index = 1;
                        //关闭过度效果
                        imgbox.style.transition = "none";
                        imgbox.style.left = (-index * bannerwidth) + "px";
                    }
                }, 500);
            }, 2000);
        };
        startTime();

        //实现手动轮播
        var startX, moveX, disX;
        //标记当前过渡效果是否已经执行完毕
        var isEnd = true;
        //为图片添加触摸事件
        imgbox.addEventListener("touchstart", function(e) {
            // console.log("1111");
            //清除定时器
            clearInterval(timerId);
            //获取当前手指的起始位置
            startX = e.targetTouches[0].clientX;
        });
        //为图片添加触摸事件  滑动过程
        window.addEventListener("touchmove", function(e) {
            // console.log("1111");
            if (isEnd == true) {
                //记录手指在滑动过程中的位置
                moveX = e.targetTouches[0].clientX;
                //计算坐标的差异
                disX = moveX - startX;
                //清除过渡效果
                imgbox.style.transition = "none";
                //设置偏移量
                imgbox.style.left = (-index * bannerwidth + disX) + "px";
            }
        });
        //触摸结束事件
        imgbox.addEventListener("touchend", function(e) {
            // console.log("1111");
            isEnd = false;
            //获取当前滑动的距离  判断距离是否超出指定的范围
            if (Math.abs(disX) > 100) {
                if (disX > 100) {
                    index--;
                } else {
                    index++;
                }
                //翻页
                imgbox.style.transition = "left 0.5s ease-in-out";
                imgbox.style.left = -index * bannerwidth + "px";
            } else if (Math.abs(disX) > 0) {
                //回弹
                imgbox.style.transition = "left 05s ease-in-out";
                imgbox.style.left = -index * bannerwidth + "px";
            }
            //将上一次move所产生的数据重置为0
            startX = 0;
            moveX = 0;
            disX = 0;
            //重新开启定时器
            startTime();
        });

        /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
        imgbox.addEventListener("webkitTransitionEnd", function() {
            //到最后一张(count-1) 回到索引1
            //到第一张 回到索引count-2
            if (index == count - 1) {
                index = 1;
                //清除过渡
                imgbox.style.transition = "none";
                //设置偏移
                imgbox.style.left = -index * bannerwidth + "px";
            } else if (index == 0) {
                index = count - 2;
                //清除过渡
                imgbox.style.transition = "none";
                //设置偏移
                imgbox.style.left = -index * bannerwidth + "px";
            }
            //设置标记
            setdian(index);
            setTimeout(function() {
                isEnd = true;
                /*清除之前添加的定时器*/
                clearInterval(timerId);
                //重新开启定时器
                startTime();
            }, 100);
        });
    };
    lunbo();
</script>

</html>